<template>
  <div class="box">
    <div class="title">
      <h4>芙蓉楼送辛渐</h4>
      <!-- 2. 点击取反变量 -->
      <span
        class="btn"
        @click=" isShow = !isShow "
      >
        <!-- 4. 三元表达式 显示哪个文字 -->
        {{ isShow ? '收起' : '展开' }}
      </span>
    </div>
    <!-- 3. v-show 控制显示或隐藏 -->
    <div
      class="container"
      v-show="isShow"
    >
      <p>寒雨连江夜入吴, </p>
      <p>平明送客楚山孤。</p>
      <p>洛阳亲友如相问，</p>
      <p>一片冰心在玉壶。</p>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: false
    }
  }
};
</script>


<style scoped>
/* style 添加了 scoped 属性后，可以实现样式独立作用域 */
div{
  background-color: pink;
}
</style>